<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <el-input
        v-model="userdate.query"
        placeholder="请输入账号"
        :span="8"
        class="input-with-select"
        clearable
        @clear="getUsersApiList"
        @change="getUsersApiList"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="getUsersApiList"
        ></el-button>
      </el-input>

      <el-button
        type="primary"
        icon="el-icon-search"
        :span="4"
        class="search_but"
        @click="adduser"
        >新增用户</el-button
      >

      <!-- 新增对话框 -->
      <el-dialog title="添加用户" :visible.sync="adddialogVisible" width="30%">
        <el-form
          ref="userform"
          :model="userform"
          :rules="userformrules"
          label-width="80px"
        >
          <el-form-item label="用户名称" prop="username">
            <el-input v-model="userform.username"></el-input>
          </el-form-item>

          <el-form-item label="用户密码" prop="password">
            <el-input v-model="userform.password" type="password"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="userform.email"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="mobile">
            <el-input v-model="userform.mobile"></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="adddialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveadduser">确 定</el-button>
        </span>
      </el-dialog>

      <el-table :data="UsersApiList" style="width: 100%" border stripe>
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column
          prop="username"
          label="姓名"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="role_name"
          label="职务"
          width="180"
        ></el-table-column>
        <el-table-column prop="mobile" label="电话" width="200">
        </el-table-column>
        <el-table-column prop="email" label="邮箱" width="200">
        </el-table-column>

        <el-table-column prop="mg_state" label="状态" width="100">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.mg_state"
              @change="changeuserstate(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="205">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="分配角色"
              placement="top-start"
            >
              <el-button
                type="success"
                icon="el-icon-check"
                circle
              ></el-button>
            </el-tooltip>



            <!-- 修改对话框 -->
            <el-dialog
              title="编辑用户"
              :visible.sync="editdialogVisible"
              width="30%"
            >
              <el-form
                ref="form"
                :model="edituser"
                :rules="editrules"
                label-width="80px"
              >
                <el-form-item label="用户名">
                  <el-input v-model="edituser.username"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                  <el-input v-model="edituser.email"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="mobile">
                  <el-input v-model="edituser.mobile"></el-input>
                </el-form-item>
              </el-form>

              <span slot="footer" class="dialog-footer">
                <el-button @click="editdialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveedituser"
                  >确 定</el-button
                >
              </span>
            </el-dialog>

            <el-tooltip
              class="item"
              effect="dark"
              content="编辑"
              placement="top-start"
            >
              <el-button
                type="primary"
                icon="el-icon-edit"
                @click="showeditid(scope.row.id)"
                circle
              ></el-button>
            </el-tooltip>

            <!-- 修改对话框 -->
            <el-dialog
              title="编辑用户"
              :visible.sync="editdialogVisible"
              width="30%"
            >
              <el-form
                ref="form"
                :model="edituser"
                :rules="editrules"
                label-width="80px"
              >
                <el-form-item label="用户名">
                  <el-input v-model="edituser.username"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                  <el-input v-model="edituser.email"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="mobile">
                  <el-input v-model="edituser.mobile"></el-input>
                </el-form-item>
              </el-form>

              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveedituser"
                  >确 定</el-button
                >
              </span>
            </el-dialog>

            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="top-start"
            >
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="showdeluser(scope.row.id)"
                circle
              ></el-button>
            </el-tooltip>

            <el-dialog
              title="提示"
              :visible.sync="deldialogVisible"
              width="30%"
            >
              <el-form ref="delform" :model="edituser" label-width="80px">
                <el-form-item label="用户名">
                  <Span>{{ edituser.username }}</Span>
                </el-form-item>
              </el-form>

              <span>确定要删除吗？QAQ</span>
              <span slot="footer" class="dialog-footer">
                <el-button @click="deldialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="savadeluser(scope.row.id)"
                  >确 定</el-button
                >
              </span>
            </el-dialog>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <span class="demonstration">页码</span>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="userdate.pagenum"
          :page-sizes="[1, 3, 5, 10]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="99"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userdate: {
        query: "",
        pagenum: 1,
        pagesize: 5,
      },
      UsersApiList: [],
      total: 0,
      editdialogVisible: false,
      adddialogVisible: false,
      deldialogVisible: false,

      rolefrom: {
        id: 0,
        rid: 0,
      },
      userform: {
        username: "",
        password: "",
        email: "",
        mobile: "",
      },

      userformrules: {
        username: [
          { required: true, message: "请输入正确的用户名", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入正确的密码", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 16 个字符",
            trigger: "blur",
          },
        ],
        email: [
          { required: true, message: "请输入正确的邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: "blur",
          },
        ],
        mobile: [
          { required: true, message: "请输入正确的手机号码", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 16 个字符",
            trigger: "blur",
          },
        ],
      },
      edituser: [
        {
          id: 0,
          username: "",
          email: "",
          mobile: "",
        },
      ],
      editrules: {
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: "blur",
          },
        ],
        mobile: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
      },
    };
  },
  created() {
    this.getUsersApiList();
  },
  methods: {
    async getUsersApiList() {
      const { data: res } = await this.$http.get("users", {
        params: this.userdate,
      });
      if (res.meta.status != 200) {
        return this.$message.error("error: " + res.meta.msg);
      } else {
        this.$message({
          message: "success:" + res.meta.msg,
          type: "success",
        });
        //数据获取
        this.UsersApiList = res.data.users;
        // this.edituser = res.data.users;
        // this.userdate.pagenum=res.data.users.length;
        // console.log("123", this.edituser);
        // console.log(res.data);
      }
    },
    //   // 每页显示的条数
    handleSizeChange(val) {
      // console.log("111",val);
      this.userdate.pagesize = val;
      this.getUsersApiList();
    },
    //   // 显示第几页
    handleCurrentChange(val) {
      // console.log("222",val);
      this.userdate.pagenum = val;
      this.getUsersApiList();
    },
    async changeuserstate(userdate) {
      // console.log(userdate);

      const { data: res } = await this.$http.put(
        "users/" + userdate.id + " /state/" + userdate.mg_state
      );

      // 傻逼玩意不支持${}写法
      // const { data: res } = await this.$http.put(
      //   "users/${userdate.id}/state/${userdate.mg_state}"
      // );

      if (res.meta.status != 200) {
        return this.$message.error("error: " + res.meta.msg);
      } else {
        this.$message({
          message: "success:" + res.meta.msg,
          type: "success",
        });
      }
    },
    //关闭弹出框
    // handleClose(done) {
    //   this.$confirm("确认关闭？")
    //     .then((_) => {
    //       done();
    //     })
    //     .catch((_) => {});
    // },
    //编辑 根据id进行查询一条用户
    async showeditid(id) {
      const { data: res } = await this.$http.get("users/" + id);
      // console.log("id",id);
      // console.log("id", res.data);
      if (res.meta.status != 200) {
        return this.$message.error("error: " + res.meta.msg);
      } else {
        this.$message({
          message: "success:" + res.meta.msg,
          type: "success",
        });
      }
      this.edituser = res.data;
      this.editdialogVisible = true;
    },
    //保存编辑
    async saveedituser() {
      const { data: res } = await this.$http.put("users/" + this.edituser.id, {
        email: this.edituser.email,
        mobile: this.edituser.mobile,
      });

      if (res.meta.status != 200) {
        return this.$message.error("error: " + res.meta.msg);
      } else {
        this.$message({
          message: "success:" + res.meta.msg,
          type: "success",
        });
        // 是否开启修改后只查询修改过的数据
        this.userdate.query = this.edituser.username;
        this.getUsersApiList();
        this.editdialogVisible = false;
      }
    },
    adduser() {
      this.adddialogVisible = true;
    },

    async saveadduser() {
      const { data: res } = await this.$http.post("users/", {
        username: this.userform.username,
        password: this.userform.password,
        email: this.userform.email,
        mobile: this.userform.mobile,
      });
      if (res.meta.status != 201) {
        return this.$message.error("error: " + res.meta.msg);
      } else {
        this.$message({
          message: "success:" + res.meta.msg,
          type: "success",
        });
        this.adddialogVisible = false;
        // 是否开启修改后只查询增加过的的数据
        this.userdate.query = this.userform.username;
        this.getUsersApiList();
      }
    },

    async showdeluser(id) {
      const { data: res } = await this.$http.get("users/" + id);
      // console.log("id",id);
      // console.log("id", res.data);
      if (res.meta.status != 200) {
        return this.$message.error("error: " + res.meta.msg);
      } else {
        this.$message({
          message: "success:" + res.meta.msg,
          type: "success",
        });
      }
      this.edituser = res.data;
      this.deldialogVisible = true;
    },
    async savadeluser(id) {
      const { data: res } = await this.$http.delete("users/" + id);
      if (res.meta.status != 200) {
        return this.$message.error("error: " + res.meta.msg);
      } else {
        this.$message({
          message: "success:" + res.meta.msg,
          type: "success",
        });
        this.deldialogVisible = false;
        this.getUsersApiList();
      }
    },
    async showroleuser(id) {
      const { data: res } = await this.$http.get("users/" + id);
      // console.log("id",id);
      // console.log("id", res.data);
      if (res.meta.status != 200) {
        return this.$message.error("error: " + res.meta.msg);
      } else {
        this.$message({
          message: "success:" + res.meta.msg,
          type: "success",
        });
      }
      console.log(res.data);
      this.rolefrom = res.data;
      this.editdialogVisible = true;
    },

    async saveroleuser() {
      const { data: res } = await this.$http.put(
        "users/" + id + "/" + roleuser.rid
      );
      if (res.meta.status != 200) {
        return this.$message.error("error: " + res.meta.msg);
      } else {
        this.$message({
          message: "success:" + res.meta.msg,
          type: "success",
        });
        this.roledialogVisible = false;
        this.getUsersApiList();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  margin-top: 20px;
  box-shadow: 0 0 10px;
}
.input-with-select {
  width: 400px;
}
.search_but {
  margin-left: 20px;
}
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.el-table {
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>